<template>
	<view>
		<view style="height: 160rpx;box-sizing:border-box; padding-top: 81rpx;border-bottom: 2rpx solid #F7F7F7;display: flex;">

			<image @click="backTo()" src="/static/shequ/fh.png" style="margin: 0 259rpx 0 30rpx; width: 18rpx;height: 32rpx;" mode="aspectFit"></image>

			<text style="font-size: 32rpx;">全部菜品</text>
		</view>
		<view style="display: flex;">
			<!-- 选择栏 -->
			<view class="list">
				<view v-for="(sp, index) in sp" class="sp" :key="index" :class="{ active: spIndex === index }" @click="listIndex(index)">{{ sp }}</view>
			</view>
			<!-- 商品列表区域 -->
			<scroll-view scroll-y="true">
				<view v-if="spIndex === 3" style="display: flex;margin-bottom: 30rpx;" v-for="(item, index) in 4">
					<view style="width: 168rpx;height: 168rpx;background-color: #F7F7F7;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;">
						<image src="" style="background-color: #707895; width: 136rpx;height: 105rpx;" mode="aspectFit"></image>
					</view>
					<view style="margin-left: 20rpx;margin-top: -20rpx;">
						<view style="display: flex;line-height: 40rpx; flex-direction: column;font-size: 24rpx;color: #999999;">
							<text style="font-size: 30rpx;color: #1B1B1B;margin-top: 14rpx;">好多个柠檬</text>
							<text style="width: 354rpx; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
								好吃水份多又大的柠檬正宗柠檬好吃水份多又大的柠檬正宗柠檬
							</text>
							<view>
								<text style="margin-right: 10rpx;">月售 256</text>
								<text>好评率100%</text>
							</view>
						</view>
						<view style="display: flex;align-items: center;	margin-top: 15rpx;">
							<view>
								<text style="font-size: 24rpx;color: #F61B00;">¥</text>
								<text style="font-size: 36rpx;color: #F61B00;">14.5</text>
								<text style="font-size: 24rpx;color: #B4B4B4;text-decoration: line-through;">¥20.5</text>
							</view>
							<text
								
								style="margin-left: 100rpx; display: flex;align-items: center;justify-content: center; width: 120rpx;height: 46rpx;background-color:#FFD333;border-radius: 23rpx;color: #1B1B1B;font-size: 24rpx;"
							>
								抢购
							</text>
						</view>		
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				spIndex: 3,
				sp: ['精美礼盒', '营养乳品', '时令蔬菜', '新鲜蔬果', '肉蛋家禽', '精美礼盒', '营养乳品', '时令蔬菜', '新鲜蔬果', '肉蛋家禽']
			};
		},
		
		methods:{
			listIndex(index) {
				this.spIndex = index;
			}
			
		}
	}
</script>

<style lang="scss">
.list .active {
	background-color: #fff;
	color: #1b1b1b;
}
.sp {
	width: 141rpx;
	height: 99rpx;
	background-color: #f7f7f7;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #999999;
	margin-right: 14rpx;
}
</style>
